<template>
  <div class="container">
    <div v-loading="fullscreenLoading" element-loading-text="正在分析数据...请勿重复刷新哦~"
         ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import dataApi from "@/api/dataApi";

export default {
  name: "View1",
  data() {
    return {
      fullscreenLoading: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.fullscreenLoading = true;
      dataApi.getSeriesNamePrice().then(resp => {
        const data = resp.data
        const myChart = echarts.init(this.$refs.chart)
        var option = {
          title: {
            text: "各车型最低价与最高价对比图",
            left: "center",
            textStyle: {
              fontSize: 30
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {
            data: ['最低价', '最高价'],
            left: "left"
          },
          // grid: {
          //   right: '20%'
          // },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                rotate: 30,
              },
              data: data.map(item => item.name)
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '最低价',
              position: 'left',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#5470C6'
                }
              },
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '最高价',
              position: 'right',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#91CC75'
                }
              },
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '最低价',
              type: 'bar',
              yAxisIndex: 0,
              data: data.map(item => item.value1),
              itemStyle: {
                color: '#5470C6'
              }
            },
            {
              name: '最高价',
              type: 'bar',
              yAxisIndex: 1,
              data: data.map(item => item.value2),
              itemStyle: {
                color: '#91CC75'
              },
              smooth: true
            },

          ]
        };
        myChart.setOption(option);
        this.fullscreenLoading = false
      })
    }
  }

}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 90%;
  min-height: 300px; /* 设置最小高度，避免图表内容过少时显示不全 */
}
</style>
